<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东某个商品价格信息</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			
			.container{
				width: 500px;
			}
		</style>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div class="container">
			<button id="btn" class="btn btn-block" style="color: white; background-color: #CE8483;">点我</button>
			<div style="color: white; background-color: #1B6D85;padding: 10px;margin: 10px;">商品编号：<span id="id"></span></div>
			<div style="color: white; background-color: #1B6D85;padding: 10px;margin: 10px;">商品价格：<span id="price"></span> </div>
		</div>
	</body>
	<script>
		// 1.实现写死JSON字符串，解析展现在网页上
		// var jsonstr='[{"p":"17999.00","op":"17999.00","cbf":"0","id":"J_100010378153","m":"100000.00"}]';
		// 2.获取价格和编号
		// var obj = JSON.parse(jsonstr);//把字符串转换成js对象
		
		// ajax封装请求后，会把返回的JSON字符串（京东），直接转换成js对象
		// 参数是一个js对象
		$.ajax({
			type:"get",
			url:"https://p.3.cn/prices/mgets?skuIds=J_100010378153",
			dataType:"jsonp",
			success:function(data){
				console.log(data);
				var obj = data;
				var price = obj[0].p;
				var id = obj[0].id;
				console.log(price+","+id);
				
				$("#btn").click(function(){
					$("#id").text(id).css("color","red");
					$("#price").text(price).css("background-color","red");
				})
			}
		});
		
	</script>
</html>
